<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data: ['对外接口访问次数', '数据抽取任务执行次数']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '访问次数',
            min: 0,
            max: 5000,
            interval: 1000,
            axisLabel: {
                formatter: '{value} 次'
            }
        },
        {
            type: 'value',
            name: '执行次数',
            min: 0,
            max: 320,
            interval: 50,
            axisLabel: {
                formatter: '{value} 次'
            }
        }
    ],
    series: [
        {
            name: '对外接口访问次数',
            type: 'bar',
            yAxisIndex: 0,
            data: [1350, 2563, 1204, 1565, 2653, 2895, 3526, 3026, 3425, 3789, 4256, 4553]
        },
        {
            name: '数据抽取任务执行次数',
            type: 'line',
            yAxisIndex: 1,
            data: [125, 251, 136, 156, 158, 189, 175, 215, 236, 256, 305, 236]
        }
    ]
   })
    }
  }
}
</script>
